<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">班级科目对比统计</h3>
    </div>
    <div class="panel-body">
        <div style="display:inline-block;">

            <div style="float:left;padding:6px;">
                <span>专业编号：</span>
            </div>
            <div style="float:left;">
                <select id="mid" class="form-control" style="width:180px;">
                    <option value="11">11</option>
                    <option value="4">4</option>
                </select>
            </div>

            <div style="float:left;padding:6px;">
                <span>年级：</span>
            </div>
            <div style="float:left;">
                <select id="gradeid" class="form-control" style="width:180px;">
                    <option value="2020">2020</option>
                    <option value="2021">2021</option>
                    <option value="2022">2022</option>
                </select>
            </div>

            <!--                <div style="float:left;padding:6px;">-->
            <!--                    <span>班级：</span>-->
            <!--                </div>-->
            <!--                <div style="float:left;">-->
            <!--                    <select id="classid" class="form-control" style="width:180px;">-->
            <!--                        <option value="2">2</option>-->
            <!--                        <option value="3">3</option>-->
            <!--                        <option value="4">4</option>-->
            <!--                    </select>-->
            <!--                </div>-->

            <div style="float:left;padding:6px;">
                <span>课程名：</span>
            </div>
            <div style="float:left;">
                <select id="cname" class="form-control" style="width:180px;">
                    <option value="计算机基础">计算机基础</option>
                    <option value="程序设计">程序设计</option>
                    <option value="微机原理">微机原理</option>
                    <option value="数据结构">数据结构</option>
                    <option value="计算机网络">计算机网络</option>
                </select>
            </div>


        </div>
    </div>
</div>
</div>

<div class="box1">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>
</div>

<script src="/js/msg.js"></script>

    <script type="text/javascript">

        // 页面加载时调用
        $(function (){
            getChart();
        })
        function getChart(){
            // 获取下拉框选中的值
            // 专业编号
            let mid1 = $("#mid option:selected").val()
            console.log(mid1)
            let gradeid1 = $("#gradeid option:selected").val()
            console.log(gradeid1)
            let cname1 = $("#cname option:selected").val()
            console.log(cname1)


            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById("main"));
            // 指定图表的配置项和数据

            let second = [];
            let third = [];
            let fourth = [];

            let names = [];
            let values = [];

            //数据加载完之前先显示一段简单的loading动画
            myChart.showLoading();

            $.ajax({
                url:"/webapi/subjectcompare/getscore",
                method:"post",
                data:{
                    mid: mid1,
                    gradeid: gradeid1,
                    cname: cname1
                },
                success: function (rs){
                    let result = rs.data;
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    if(rs.code === 405){
                        myChart.hideLoading();
                        myChart.setOption({
                            title: [{
                                text: "",
                            },],
                            xAxis: {
                                axisLabel:{ show: false},
                                axisTick: {		//x轴刻度线
                                    show:false
                                },
                                "axisLine":{     //x轴坐标轴
                                    "show":false
                                },

                            },
                            yAxis: {

                                axisTick: {		//x轴刻度线
                                    show:false
                                },
                                "axisLine":{     //x轴坐标轴
                                    "show":false
                                },
                            },
                            legend: {},
                            tooltip: {},
                            series: [{
                                name: "",
                                type: "",
                                data: ""
                            },{
                                name: "",
                                type: "",
                                data: ""
                            },{
                                name: "",
                                type: "",
                                data: ""
                            }]
                        })
                        message.showText("error",rs.msg);
                    }
                    else if (rs.code === 200) {
                        for(let i=0;i<result.length;i++){
                            if (result[i].classid === 2){
                                // second.push(result[i].classid)
                                second.push(result[i].score);
                            }else if(result[i].classid === 3){
                                third.push(result[i].score);
                            }else{
                                fourth.push(result[i].score);
                            }
                            names.push(result[i].classid);
                            values.push(result[i].score);
                        }
                        let sum1 = 0
                        // 求2班平均数
                        for(let i = 0;i < second.length;i++){
                            sum1 = sum1 + second[i];
                        }
                        let avg1;
                        avg1 = sum1 / second.length;

                        let sum2 = 0
                        // 求3班平均数
                        for(let i = 0;i < third.length;i++){
                            sum2 = sum2 + third[i];
                        }
                        let avg2;
                        avg2 = sum2 / third.length;

                        let sum3 = 0
                        // 求4班平均数
                        for(let i = 0;i < fourth.length;i++){
                            sum3 = sum3 + fourth[i];
                        }
                        let avg3;
                        avg3 = sum3 / fourth.length;

                        console.log(avg1)
                        console.log(avg2)
                        console.log(avg3)


                        // 求各班级最大数
                        // 2班
                        let max1 = second[0];
                        for(let i = 1;i < second.length;i++){
                            if(second[i] > max1){
                                max1 = second[i];
                            }
                        }

                        // 3班
                        let max2 = third[0];
                        for(let i = 1;i < third.length;i++){
                            if(third[i] > max2){
                                max2 = third[i];
                            }
                        }

                        // 4班
                        let max3 = fourth[0];
                        for(let i = 1;i < fourth.length;i++){
                            if(fourth[i] > max3){
                                max3 = fourth[i];
                            }
                        }


                        // 求各班级中位数
                        // 2班
                        // 对数组元素进行从小到大排序
                        let t;
                        for(let i = 1;i < second.length;i++){
                            for (let j = 0; j <= second.length - i - j;j++){
                                if (second[j] > second[j + 1]){
                                    t = second[j];
                                    second[j] = second[j + 1];
                                    second[j + 1] = t;
                                }
                            }
                        }

                        // 求中位数
                        let v1;
                        let len;
                        len = second.length;
                        console.log(len / 2)
                        if (len % 2 !== 0){
                            let len1 = Number(len / 2)
                            v1 = second[parseInt(len1)];
                        }else{
                            v1 = (second[len / 2] + second[len / 2 - 1]) / 2.0;
                        }


                        // 求各班级中位数
                        // 3班
                        // 对数组元素进行从小到大排序
                        let t1;
                        for(let i = 1;i < third.length;i++){
                            for (let j = 0; j <= third.length - i - j;j++){
                                if (third[j] > third[j + 1]){
                                    t1 = third[j];
                                    third[j] = third[j + 1];
                                    third[j + 1] = t1;
                                }
                            }
                        }
                        // 求中位数
                        let v2;
                        if (third.length % 2 !== 0){
                            let len = parseInt(Number(third.length / 2));
                            v2 = third[len];
                        }else{
                            v2 = (third[third.length / 2] + third[third.length / 2 - 1]) / 2.0;
                        }


                        // 求各班级中位数
                        // 4班
                        // 对数组元素进行从小到大排序
                        let t2;
                        for(let i = 1;i < fourth.length;i++){
                            for (let j = 0; j <= fourth.length - i - j;j++){
                                if (fourth[j] > fourth[j + 1]){
                                    t2 = fourth[j];
                                    fourth[j] = fourth[j + 1];
                                    fourth[j + 1] = t2;
                                }
                            }
                        }
                        // 求中位数
                        let v3;
                        if (fourth.length % 2 !== 0){
                            let len = parseInt(Number(fourth.length / 2));
                            v3 = fourth[len];
                        }else{
                            v3 = (fourth[fourth.length / 2] + fourth[fourth.length / 2 - 1]) / 2.0;
                        }



                        console.log(v2)
                        console.log(v3)

                        console.log(max1)
                        console.log(max2)
                        console.log(max3)

                        let data1;
                        data1 = [avg1,avg2,avg3];

                        let data2;
                        data2 = [max1,max2,max3];

                        let data3;
                        data3 = [v1,v2,v3];

                        myChart.hideLoading();    //隐藏加载动画
                        myChart.setOption(
                            {
                                title: {
                                    text: '学生成绩对比统计'
                                },
                                tooltip: {},
                                legend: {
                                    name:['平均数',"最大数","中位数"],
                                    // orient: 'vertical',
                                    // right: 10,
                                    // top: 'center'
                                },
                                xAxis: {
                                    axisLabel:{ show: true },
                                    axisTick: {		//x轴刻度线
                                        show:true
                                    },
                                    "axisLine":{     //x轴坐标轴
                                        "show":true
                                    },
                                    data: ["2","3","4"]
                                },
                                yAxis: {
                                    axisTick: {		//x轴刻度线
                                        show:true
                                    },
                                    "axisLine":{     //x轴坐标轴
                                        "show":true
                                    },
                                },
                                series: [{
                                    name: '平均数',
                                    type: 'bar',
                                    data: data1
                                },{
                                    name: "最大数",
                                    type: "bar",
                                    data: data2
                                },{
                                    name:"中位数",
                                    type: "bar",
                                    data: data3
                                }]
                            }
                        );
                        message.showText("success",rs.msg);
                    }
                },

                error : function(errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myChart.hideLoading();
                }
            })
        }


        // 下拉框值改变时调用
        $("#mid").change(function (){
            getChart()
        })

        $("#gradeid").change(function (){
            getChart()
        })


        $("#cname").change(function (){
            getChart()
        })

    </script>

</body>
</html>